<style>
#menu {
  position: absolute;
  top:10px;
  right:10px;
  z-index: 1;
  color: white;
  cursor: pointer;
}
#menu-container {
  position: absolute;
  display: none;
  top: 50px;
  right: 10px;
  z-index: 1;
  background-color: white;
  padding: 20px;
}
</style>

<div id="menu"><span class='icon menu big'></span></div>

<div id="menu-container">
  <h4>Filter</h4>
  <div id="menu-filter" onchange="menuFilter()" class='rounded-toggle short inline'>
    <input id='filter-all' type='radio' name='rtoggle' value='all' checked='checked'>
    <label for='filter-all'>all</label>
    <input id='filter-polygons' type='radio' name='rtoggle' value='polygons'>
    <label for='filter-polygons'>polygons</label>
    <input id='filter-lines' type='radio' name='rtoggle' value='lines'>
    <label for='filter-lines'>lines</label>
    <input id='filter-pts' type='radio' name='rtoggle' value='pts'>
    <label for='filter-pts'>points</label>
  </div>
  <h4>Popup</h4>
  <div id="menu-popup" onchange="menuPopup()" class='rounded-toggle short inline'>
    <input id='show-popup' type='checkbox' name='ptoggle' value='all''>
    <label for='show-popup'>show attributes</label>
  </div>
</div>

<script>

// Show and hide hamburger menu as needed
var menuBtn = document.querySelector("#menu");
var menu = document.querySelector("#menu-container");
menuBtn.addEventListener('click', function() {
  popup.remove();
  if (menuBtn.className.indexOf('active') > -1) {
    //Hide Menu
    menuBtn.className = '';
    menu.style.display = 'none';
  } else {
    //Show Menu
    menuBtn.className = 'active';
    menu.style.display = 'block';

  }
}, false);

//Menu-Filter Module
function menuFilter() {
  if (document.querySelector("#filter-all").checked) {
    paint(layers.pts, 'visible');
    paint(layers.lines, 'visible');
    paint(layers.polygons, 'visible');
  } else if (document.querySelector("#filter-pts").checked) {
    paint(layers.pts, 'visible');
    paint(layers.lines, 'none');
    paint(layers.polygons, 'none');
  } else if (document.querySelector("#filter-lines").checked) {
    paint(layers.pts, 'none');
    paint(layers.lines, 'visible');
    paint(layers.polygons, 'none');
  } else if (document.querySelector("#filter-polygons").checked) {
    paint(layers.pts, 'none');
    paint(layers.lines, 'none');
    paint(layers.polygons, 'visible');
  }

  function paint(layers, val) {
    layers.forEach(function(layer) {
      map.setLayoutProperty(layer, 'visibility', val)
    });
  }
}

function menuPopup() {
  wantPopup = document.querySelector("#show-popup").checked;
}

</script>
